<template>
  <div id="NewProgram">
    <div class="homeModule-title">
      <p>节目上新</p>
      <div @click="GoClassView">
        <p>更多</p>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="NewProgram-content" @click="GoBookDetails">
      <img :src="NewProgram.image" alt="" />
      <div>
        <div class="newcot-top">
          <van-divider content-position="left">{{
            NewProgram.author
          }}</van-divider>
        </div>
        <p class="NewP1">{{ NewProgram.title }}</p>
        <p class="NewP2">{{ NewProgram.subtitle }}</p>
        <div class="NewProg-member">
          <span> ￥{{ NewProgram.origin_pirce }} </span>
          <span> {{ NewProgram.label_txt }} </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewProgram",
  props: ["NewProgram"],
  methods: {
    // 跳转节目
    GoBookDetails() {
      this.$router.push({
        path: "/BookDetails",
        query: {
          id: this.NewProgram.content_id,
        },
      });
      // console.log(this.NewProgram.content_id);
    },
    // 更多按钮 跳转分类页
    GoClassView() {
      this.$router.replace("/ClassView");
    },
  },
};
</script>

<style lang="scss" scoped>
#NewProgram {
  margin: 0.625rem 0;

  .NewProgram-content {
    height: 8.75rem;
    background-color: white;
    box-shadow: var(--boxsizi);
    padding: 0.875rem;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    img {
      width: 5.625rem;
      height: 100%;
    }
    div {
      width: 68%;
      padding-left: 0.625rem;
      box-sizing: border-box;
      position: relative;

      .newcot-top {
        width: 100%;

        .van-divider {
          width: 100%;
          font-size: 0.8125rem;
          border-color: #333;
          margin: 0 0;
          padding-left: 0;
        }
      }
    }
    .NewP1 {
      padding: 0.625rem 0;
      font-size: 0.875rem;
    }
    .NewP2 {
      font-size: 0.75rem;
      color: var(--fontcolor);
    }
    .NewProg-member {
      position: absolute;
      bottom: 0;
      span:nth-child(1) {
        color: #cf5a1c;
        font-size: 0.75rem;
      }
      span:nth-child(2) {
        color: #cfbd8c;
        font-size: 0.75rem;
        background-color: #faf6de;
        padding: 0.125rem;
        box-sizing: border-box;
      }
    }
  }
}
</style>